import {PageContainer,} from '@ant-design/pro-components';
import React, {useEffect} from 'react';
import { Button, Card, Form, Input, InputNumber, message, Select, Switch } from "antd";
import { edit, save } from "./service";
import {FormInstance} from "antd/lib";

export default () => {
  const [form] = Form.useForm<FormInstance>()

  useEffect(() => {
    edit({}).then(result=>{
      form.setFieldsValue(result.data);
    })
  },[])

  return (
    <PageContainer title={false}>
      <Card>
        <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 12}} initialValues={{
          clear: true,
        }} onFinish={(formValues)=>{
          console.log(formValues);
          save(formValues).then((result)=>{
            message.success(result.data).then();
            edit({}).then(result=>{
              form.setFieldsValue(result.data);
            })
          })
        }}>
          <Form.Item name='id' style={{display:'none'}}>
            <Input />
          </Form.Item>
          <Form.Item label='下注第几个数' name='num' rules={[{required:true}]}>
            <Select>
              <Select.Option value='1'>1</Select.Option>
              <Select.Option value='2'>2</Select.Option>
              <Select.Option value='3'>3</Select.Option>
              <Select.Option value='4'>4</Select.Option>
              <Select.Option value='5'>5</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label='下注类型' name='type' rules={[{required:true}]}>
            <Select>
              <Select.Option value={1}>单/双</Select.Option>
              <Select.Option value={2}>大/小</Select.Option>
              <Select.Option value={3}>数字</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label='下注金额' name='money' rules={[{required:true}]}>
            <InputNumber step={1} min={0} precision={0} style={{width:'100%'}} />
          </Form.Item>
          <Form.Item label='开启下注' name='open' rules={[{required:true}]}>
            <Select>
              <Select.Option value={0}>关闭</Select.Option>
              <Select.Option value={1}>开启</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label='清除数据' name='clear' rules={[{required:true}]} valuePropName='checked'>
            <Switch checkedChildren='清除' unCheckedChildren='不清除' />
          </Form.Item>
          <Form.Item wrapperCol={{offset: 6}}>
            <Button type="primary" htmlType="submit">保存</Button>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  );
};
